 import React, { PropTypes } from 'react';
 class Paging extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             pageIndex: 1,
         };
     }
     getPagings() {
         const { total, pageSize, pageRange } = this.props;
         const { pageIndex = 1 } = this.state;
         const totalPage = Math.ceil(total / pageSize);

         const multi = Math.ceil(pageIndex / pageRange);
         let end = pageRange * multi;
         let start = end - pageRange + 1;

         if (end > totalPage) {
             end = totalPage;
         }

         if (start < 1) {
             start = 1;
         }
         const pagings = [];
         for (let i = start, l = end; i <= l; i++) {
             pagings.push({
                 index: i,
             });
         }
         return pagings;
     }
     setPageIndex(index) {
         this.state = {
             pageIndex: index,
         };
         this.props.onPageSizeChange && this.props.onPageSizeChange(index);
     }
     handleOnPrevPage() {
         const pageIndex = this.state.pageIndex - 1;
         const index = pageIndex < 1 ? 1 : pageIndex;
         this.setState({
             pageIndex: index,
         });
         this.props.onPageSizeChange && this.props.onPageSizeChange(index);
     }
     handleOnNextPage() {
         const { total, pageSize } = this.props;
         const totalPage = Math.ceil(total / pageSize);
         const pageIndex = this.state.pageIndex + 1;
         const index = pageIndex > totalPage ? totalPage : pageIndex;
         this.setState({
             pageIndex: index,
         });
         this.props.onPageSizeChange && this.props.onPageSizeChange(index);
     }
     handleOnGoToFirstPage() {
         this.setState({
             pageIndex: 1,
         });
         this.props.onPageSizeChange && this.props.onPageSizeChange(1);
     }
     handleOnGoToLastPage() {
         const { total, pageSize } = this.props;
         const totalPage = Math.ceil(total / pageSize);
         this.setState({
             pageIndex: totalPage,
         });
         this.props.onPageSizeChange && this.props.onPageSizeChange(totalPage);
     }
     handleOnChangePage(e) {
         const element = $(e.target || e.srcElement);
         const index = element.attr('data-index');
         this.setState({
             pageIndex: parseInt(index),
         });
         this.props.onPageSizeChange && this.props.onPageSizeChange(index);
     }

     render() {
         const pagings = this.getPagings();
         const length = pagings.length;
         const totalWidth = length > 5 ? 5 * 35 : length * 35;
         const pageIndex = this.state.pageIndex;
         return (
           <div className="footer_pag">
             <ul>
               <li onClick={e => this.handleOnGoToFirstPage(e)} className="glyphicon glyphicon-step-backward page_jump" />
               <li onClick={e => this.handleOnPrevPage(e)} className="glyphicon glyphicon-menu-left page_jump" />
               <li className="pages" style={{ width: `${totalWidth}px` }}>
                 <div className="paging">
                   {
                    pagings.map((item) => {
                        return (
                          <div
                            data-index={item.index} key={item.index}
                            className={`page-action ${pageIndex === item.index ? 'activepage' : ''}`}
                            onClick={e => this.handleOnChangePage(e)}
                          >{item.index}</div>
                        );
                    })
                }
                 </div>
               </li>
               <li onClick={e => this.handleOnNextPage(e)} className="glyphicon glyphicon-menu-right page_jump" />
               <li onClick={e => this.handleOnGoToLastPage(e)} className="glyphicon glyphicon-step-forward page_jump" />
             </ul>
           </div>

         );
     }
 }

 Paging.propTypes = {
     pageSize: PropTypes.number,
     total: PropTypes.number,
     pageRange: PropTypes.number,
 };

 Paging.defaultProps = {
     pageSize: 8,
     total: 0,
     pageRange: 5,
 };

 export default Paging;
